<template lang="">
  <div class="home">
    <van-nav-bar >
     <template #left>
       <!-- <van-image :src="require('../../assets/logo')"/> -->
        <div class="logo"></div>
      </template>
  <template #right>
      <van-button @click="$router.push({path:'/Search'})" round icon="search" type="info"  >
         搜索
</van-button>
    
  </template>
</van-nav-bar>
<van-tabs v-model="active">
<van-tab v-for="(item, index) in channels" :key="index" :title="item.name">
  <article-list :channel_id="item.id" /> <!-- :channel_id="item.id" -->
  </van-tab>
</van-tabs>
<div class="bg">
  <van-icon @click="Channelshow=true" class="channel" size="25" name="apps-o" />
</div>
   <!-- <van-popup v-model="Channelshow" round position="bottom" :style="{ height: '70%' }" >
   <ChanNel :ChannelArray="channels"/>
   </van-popup> -->
   <van-action-sheet v-model="Channelshow" title="频道管理">
      <ChanNel 
      :ChannelArray="channels"
      :allChannels="Allchannels"
      v-model="active"
      @close="Channelshow = false"
      />
    </van-action-sheet>
  </div>
</template>
<script>
import {getChannels} from '@/utils/storage'
import {getChannelsAPI} from '@/api'
import {getAllChannelsAPI} from '@/api'
import articleList from './articleList.vue'
import ChanNel from './ChanNel'
export default {
  data() {
    return {
      channels:[],
      Allchannels:[],
      active:0,
      Channelshow:false,
    }
  },
   async created(){
      let res = await getChannelsAPI();
      // console.log(res3.data.data.channels);
      this.channels = res.data.data.channels;

     let res2 = await getAllChannelsAPI()
    //  console.log(res2);
     this.Allchannels =res2.data.data.channels;
      // let res = storageChannels();
    if (this.$store.state.tokenObj.token || !res) {
      
      
      let res3 = await getChannelsAPI();
      // console.log(res3.data.data.channels);
      this.channels = res3.data.data.channels;

    } else {
      // 除了这个情况都不发请求
      let res =await getChannels();
      this.channels = res;
      // console.log(res);
    }
  },
  
 components:{
     articleList,
     ChanNel
 }
};
</script>
<style lang="less" >
.home {
  // 让home就是一屏的高度，既然只是一屏的高度那么就不会有整个页面的滚动条
  height: 100vh;
  overflow: hidden;
  //   padding-top: 46px;
  padding-bottom: 50px;
  // 注意：因为间距默认是会撑大盒子的
  // 为了让盒子我们设置多少宽高就是多少宽高，就应该把盒子模型改成内减模型
  box-sizing: border-box;
  // 导航栏区域
  position: relative;
  .van-nav-bar {
    .logo {
      // vue的项目里@符号就代表了src目录了
      // 如果我是写在less里，那么要在@符号前面
      // 加一个~才能有效
      background: url("http://www.itheima.com/images/logo.png") no-repeat;
      background-size: contain;
      width: 100px;
      height: 32px;
    }

    .van-button {
      width: 100px;
      height: 32px;
      background-color: rgba(255, 255, 255, 0.2);
      color: #fff;
      border: none;

      .van-button__icon {
        color: #fff;
      }
    }
  }
 .bg{
   position:absolute;
    width:30px;
    height:50px;
    right:0;
    top: 55px;
    background-color:#fff;
    .channel{
    width: 25px;
    position:absolute ;
    
   
  }
 }
}
</style>
